<template>
    <div class="bqDialog">
        <!-- 处室设置 -->
        <div class="cssz" v-show="$store.state.sjbqDialog === 5">
            <div class="currTitle">处室设置</div>
            <div id="csszChart"></div>
        </div>
        <!-- 社会安全事件 -->
        <div class="shaqsj" v-show="$store.state.sjbqDialog === 6">
            <div class="currTitle">市县应急局设置</div>
            <!-- <div class="shaqsjTable">
                <div id="shaqChart"></div>
                <div class="shaqtable" >
                    <table border="1">
                        <tr>
                            <th>事件类型</th>
                            <th>今年起数</th>
                            <th>今年死亡（失踪）人数</th>
                        </tr>
                        <tr v-for="(item,index) in shaqList" :key="index">
                            <td>
                                {{item.name}}
                            </td>
                            <td> 
                                {{item.name1}}
                            </td>
                            <td>
                                {{item.name2}}
                            </td>
                        </tr>
                    </table>
                </div>
            </div> -->
        </div>
        <!-- 危化品出勤组 -->
        <div class="xgbzz" v-show="$store.state.sjbqDialog === 4">
            <div class="currTitle">危化品事故出勤组</div>

            <div class="xgbzzTable">
                <div class="tfsjGroup">
                    <div
                        v-for="(item, index) in slfhList"
                        :key="index"
                        :class="{ tfsjActive: xgbzIndex == index }"
                        @click="xgbzHandleClick(index)"
                    >
                        {{ item.name }}
                    </div>
                </div>
                <div class="tfsjGroupContent">
                    <div
                        v-for="(item, index) in slfhContentList2"
                        :key="index"
                        v-show="xgbzIndex == index"
                    >
                        <div>负责人：{{ item.name }}</div>
                        <div>{{ item.name1 }}</div>
                    </div>
                </div>
                <!-- <table border="1">
                    <tr>
                        <th>备勤等级</th>
                        <th>等级划分依据</th>
                    </tr>
                    <tr>
                        <td>
                            <div>组长：卓腾飞，</div>
                            <div>副组长：郑立勇、付世刚；</div>
                        </td>
                        <td>
                            <div>负责与省委办公厅省政府办公厅工作协调；</div>
                            <div>负责省领导参与的重要会议协调与保障</div>
                            <div>负责重要材料撰写与审核、报送。</div>
                            <div>负责出勤组车、个人防护装备、作业器材、通信工具等保障，</div>
                            <div>督促检查所有技术车辆保持良好战技状态，随时做好出动准备；</div>
                            <div>负责办公大楼水、电及值班值守人员用餐保障。</div>
                        </td>
                    </tr>
                </table> -->
            </div>
        </div>
        <!-- 三防出勤组 -->
        <div class="tfsjczz" v-show="$store.state.sjbqDialog === 3">
            <div class="currTitle">三防出勤组</div>
            <div class="tfsjczzTable">
                <div class="tfsjGroup">
                    <div
                        v-for="(item, index) in slfhList"
                        :key="index"
                        :class="{ tfsjActive: tfsjIndex == index }"
                        @click="tfsjHandleClick(index)"
                    >
                        {{ item.name }}
                    </div>
                </div>
                <div class="tfsjGroupContent">
                    <div
                        v-for="(item, index) in slfhContentList1"
                        :key="index"
                        v-show="tfsjIndex == index"
                    >
                        <div>负责人：{{ item.name }}</div>
                        <div>{{ item.name1 }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 森林防火期备勤组 -->
        <div class="slfhqbqz" v-show="$store.state.sjbqDialog === 2">
            <div class="currTitle">森林防火期出勤组</div>
            <div class="slfhqbqzTable">
                <div class="slfhGroup">
                    <div
                        v-for="(item, index) in slfhList"
                        :key="index"
                        :class="{ slfhActive: slfhIndex == index }"
                        @click="slfhHandleClick(index)"
                    >
                        {{ item.name }}
                    </div>
                </div>
                <div class="slfhGroupContent">
                    <div
                        v-for="(item, index) in slfhContentList"
                        :key="index"
                        v-show="slfhIndex == index"
                    >
                        <div>负责人：{{ item.name }}</div>
                        <div>{{ item.name1 }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 三级备勤等级划分 -->
        <div class="sjbqdjhf" v-show="$store.state.sjbqDialog === 1">
            <div class="currTitle">三级备勤等级划分</div>
            <div class="sjbqdjhfTable">
                <table border="1">
                    <tr>
                        <th>备勤等级</th>
                        <th>等级划分依据</th>
                        <th>值班备勤</th>
                    </tr>
                    <tr>
                        <td>
                            <div>三级备勤</div>
                            <div>（日常值班）</div>
                        </td>
                        <td>
                            除去一级备勤（最高等级应急值守）和 二级备勤（应急值
                            守）的所有情况
                        </td>
                        <td>次日值班人员为当日值班组备勤组人员</td>
                    </tr>
                    <tr>
                        <td>
                            <div>二级备勤</div>
                            <div>（应急值守）</div>
                        </td>
                        <td>
                            <div class="flexContent">
                                <div>自然灾害*影响较大：</div>
                                <div>
                                    <div>防风防汛 III 级响应；</div>
                                    <div>较大森林火灾；</div>
                                    <div>中型地质灾害；</div>
                                    <div>风暴潮或海浪灾害 I 级预警；</div>
                                    <div>海南岛本岛有较大地震发生；</div>
                                </div>
                            </div>
                            <div class="flexContent">
                                <div>事故灾难*影响较大:</div>
                                <div>
                                    <div>较大生产安全事故（III 级）；</div>
                                    <div>农历春节长假期间；</div>
                                </div>
                            </div>
                            <div class="flexContent">
                                <div>大型活动及节假日：</div>
                                <div>
                                    <div>省级及以上活动期间</div>
                                    <div>
                                        （如：博鳌亚洲论坛，亚洲沙滩运动会等）
                                    </div>
                                </div>
                            </div>
                            <div class="flexContent">
                                <div>省或厅领导决定的紧急事项</div>
                                <div>- -</div>
                            </div>
                        </td>
                        <td>
                            次日值班人员为当日值班组备勤组人员。如启动应急响应，则根据自然灾害、事故灾难类别，三防处、安全协调处各增派1名处室负责人为值班长；办公室、综合保障处、宣传处各增派1名机关工作人员，科信处增派1名技术人员为值班员；
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>一级备勤</div>
                            <div>（最高等级应急值守）</div>
                        </td>
                        <td>
                            <div class="flexContent">
                                <div>自然灾害影响较大：</div>
                                <div>
                                    <div>防风防汛 II/ I 级响应；</div>
                                    <div>重大或特别重大森林火灾;</div>
                                    <div>特大型或大型地质灾害;</div>
                                    <div>海啸 IV 级及以上预警；</div>
                                    <div>
                                        海南岛本岛有重大或特别重大地震发生;
                                    </div>
                                </div>
                            </div>
                            <div class="flexContent">
                                <div>事故灾难影响较大:</div>
                                <div>
                                    <div>
                                        特别重大或重大生产安全事故（II/ I 级）;
                                    </div>
                                </div>
                            </div>
                            <div class="flexContent">
                                <div>国家或跨省级的重大事项；</div>
                                <div>
                                    <div>省级及以上活动期间</div>
                                    <div>- -</div>
                                </div>
                            </div>
                            <div class="flexContent">
                                <div>省或厅领导决定的紧急事项</div>
                                <div>- -</div>
                            </div>
                        </td>
                        <td>
                            在岛内的厅领导同志全部到岗，对具体自然灾害或事故灾难负有直接处置责任的相关业务处室（包括主办处室和协办处室）全员到岗，厅其它各内设处室主要负责人及有关工作人员到岗。后勤班按要求增加并到岗（主办处室、协办处室名单见备注）；
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import {
    defineComponent,
    getCurrentInstance,
    onMounted,
    ref,
    inject,
    watch,
    computed,
    nextTick,
} from "vue";
import { useStore } from "vuex";
import echarts from "echarts";
export default {
    setup() {
        const { ctx } = getCurrentInstance();
        let slfhIndex = ref(0);
        let xgbzIndex = ref(0);
        const store = useStore();
        const slfhList = [
            { name: "指挥调度组" },
            { name: "分析研判组" },
            { name: "后勤保障组" },
            { name: "宣传报道组" },
            { name: "现场督导组" },
        ];
        const slfhContentList = [
            { name: "余志荣、王业桃；", name1: "其他组员视情调配" },
            {
                name: "苏道迁、罗远杰、吴坤宏",
                name1: "其他组员视情从主办处室、协办处室增派",
            },
            { name: "卓腾飞、郑立勇", name1: "其他组员视情调配" },
            { name: "刘贡、唐珍兰", name1: "其他组员视情调配" },
            {
                name: "罗志光、杨东桥、郭利民、王振洪、王明智",
                name1: "暂定5个组",
            },
        ];
        const slfhContentList1 = [
            { name: "苏道迁；", name1: "其他组员视情调配" },
            { name: "林广源", name1: "其他组员视情从主办处室、协办处室增派" },
            { name: "卓腾飞、郑立勇", name1: "其他组员视情调配" },
            { name: "刘贡、唐珍兰", name1: "其他组员视情调配" },
            {
                name: "罗志光、杨东桥、郭利民、王振洪、王明智",
                name1: "暂定5个组",
            },
        ];
        const slfhContentList2 = [
            { name: "王华；", name1: "其他组员视情调配" },
            { name: "吴多胜", name1: "其他组员视情从主办处室、协办处室增派" },
            { name: "卓腾飞、郑立勇", name1: "其他组员视情调配" },
            { name: "刘贡、唐珍兰", name1: "其他组员视情调配" },
            {
                name: "罗志光、杨东桥、郭利民、王振洪、王明智",
                name1: "暂定5个组",
            },
        ];
        function slfhHandleClick(index) {
            slfhIndex.value = index;
        }
        function xgbzHandleClick(index) {
            xgbzIndex.value = index;
        }
        const tfsjIndex = ref(0);
        const tfsjList = [
            { name: "森林火灾出勤组" },
            { name: "三防出勤组" },
            { name: "危化品事故出勤组" },
            { name: "其他事故灾难出勤组" },
            { name: "舆情监控组" },
        ];
        const tfsjContentList = [
            {
                name: "罗远杰",
                name1: "其他组员视灾害、灾难程度，首先从带队处室领导的处室抽派，如需增派，则根据厅领导指示，由人事处、办公室视情从相关业务处室调配。",
            },
            {
                name: "苏道迁、副组长林广源",
                name1: "其他组员视灾害、灾难程度，首先从带队处室领导的处室抽派，如需增派，则根据厅领导指示，由人事处、办公室视情从相关业务处室调配。",
            },
            {
                name: "王华，副组长吴多胜",
                name1: "其他组员视灾害、灾难程度，首先从带队处室领导的处室抽派，如需增派，则根据厅领导指示，由人事处、办公室视情从相关业务处室调配。",
            },
            {
                name: "陈京发，副组长王华",
                name1: "其他组员视灾害、灾难程度，首先从带队处室领导的处室抽派，如需增派，则根据厅领导指示，由人事处、办公室视情从相关业务处室调配。",
            },
            {
                name: "刘贡、唐珍兰",
                name1: "其他组员视灾害、灾难程度，首先从带队处室领导的处室抽派，如需增派，则根据厅领导指示，由人事处、办公室视情从相关业务处室调配。",
            },
        ];
        const shaqList = [
            { name: "群体性事件", name1: "45", name2: "45" },
            { name: "金融突发事件", name1: "45", name2: "45" },
            { name: "民族和宗教事件", name1: "45", name2: "45" },
            { name: "信息安全事件", name1: "45", name2: "45" },
            { name: "刑事案件", name1: "45", name2: "45" },
            { name: "涉外事件", name1: "45", name2: "45" },
            { name: "杀人案件", name1: "45", name2: "45" },
            { name: "影响市场稳定的突发事件", name1: "45", name2: "45" },
        ];
        function tfsjHandleClick(index) {
            tfsjIndex.value = index;
        }
        function drawShaq() {
            var dom = document.getElementById("shaqChart");
            var myChart = echarts.init(dom);
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                grid: {
                    top: "20%",
                    right: "3%",
                    left: "15%",
                    bottom: "23%",
                },
                xAxis: [
                    {
                        type: "category",
                        data: [
                            "群体性事件",
                            "金融突发事件",
                            "民族和宗教事件",
                            "信息安全事件",
                            "刑事案件",
                            "涉外事件",
                            "杀人事件",
                            "影响市场稳定的突发事件",
                        ],
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,0.12)",
                            },
                        },
                        axisLabel: {
                            margin: 10,
                            color: "#e2e9ff",
                            rotate: 16,
                            textStyle: {
                                fontSize: 10,
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        name: "单位：起",
                        axisLabel: {
                            formatter: "{value}",
                            color: "#e2e9ff",
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(255,255,255,1)",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,0.12)",
                            },
                        },
                    },
                ],
                series: [
                    {
                        type: "bar",
                        data: [300, 400, 500, 600, 500, 200, 300, 400],
                        barWidth: "15px",
                        itemStyle: {
                            normal: {
                                color: "rgba(0,244,255,1)",

                                // new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(0,244,255,1)' // 0% 处的颜色
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(0,77,167,1)' // 100% 处的颜色
                                // }], false),
                                barBorderRadius: [30, 30, 30, 30],
                                shadowColor: "rgba(0,160,221,1)",
                                shadowBlur: 4,
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                lineHeight: 30,
                                width: 80,
                                height: 30,
                                backgroundColor: "rgba(0,160,221,0.1)",
                                borderRadius: 200,
                                position: ["0", "-20"],
                                distance: 1,
                                fontSize: 12,
                            },
                        },
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        function csszChart() {
            var dom = document.getElementById("csszChart");
            var myChart = echarts.init(dom);
            var nodes = [
                {
                    x: 700,
                    y: 1000,
                    nodeName: "应急管理厅处室设置",
                    svgPath:
                        "M544 552.325V800a32 32 0 0 1-32 32 31.375 31.375 0 0 1-32-32V552.325L256 423.037a32 32 0 0 1-11.525-43.512A31.363 31.363 0 0 1 288 368l224 128 222.075-128a31.363 31.363 0 0 1 43.525 11.525 31.988 31.988 0 0 1-11.525 43.513L544 551.038z m0 0,M64 256v512l448 256 448-256V256L512 0z m832 480L512 960 128 736V288L512 64l384 224z m0 0",
                    symbolSize: 40,
                },
                {
                    x: 0,
                    y: 400,
                    nodeName: "办公室",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 50,
                    y: 50,
                    nodeName: "应急指挥中心",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 150,
                    y: 400,
                    nodeName: "人事处",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 250,
                    y: 50,
                    nodeName: "政策法规处",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 350,
                    y: 400,
                    nodeName: "综合减灾和物资保障处",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 450,
                    y: 50,
                    nodeName: "防汛防风抗旱处",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 580,
                    y: 400,
                    nodeName: "安全生产综合协调处",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 700,
                    y: 50,
                    nodeName: "安全生产监督处",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 850,
                    y: 400,
                    nodeName: "海洋减灾和地震地质救援处",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 1000,
                    y: 50,
                    nodeName: "火灾防治管理处",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 1100,
                    y: 400,
                    nodeName: "调查评估统计处",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 1200,
                    y: 50,
                    nodeName: "规划科技信息处",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 1300,
                    y: 400,
                    nodeName: "宣传培训处",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 1400,
                    y: 50,
                    nodeName: "机关党委",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
            ];
            var charts = {
                nodes: [],
                linesData: [
                    {
                        coords: [
                            [700, 1000],
                            [700, 800],
                        ],
                    },
                    {
                        coords: [
                            [0, 800],
                            [0, 400],
                        ],
                    },
                    {
                        coords: [
                            [50, 800],
                            [50, 50],
                        ],
                    },
                    {
                        coords: [
                            [150, 800],
                            [150, 400],
                        ],
                    },
                    {
                        coords: [
                            [250, 800],
                            [250, 50],
                        ],
                    },
                    {
                        coords: [
                            [350, 800],
                            [350, 400],
                        ],
                    },
                    {
                        coords: [
                            [450, 800],
                            [450, 50],
                        ],
                    },
                    {
                        coords: [
                            [580, 800],
                            [580, 400],
                        ],
                    },
                    {
                        coords: [
                            [700, 800],
                            [700, 50],
                        ],
                    },
                    {
                        coords: [
                            [850, 800],
                            [850, 400],
                        ],
                    },
                    {
                        coords: [
                            [1000, 800],
                            [1000, 50],
                        ],
                    },
                    {
                        coords: [
                            [1100, 800],
                            [1100, 400],
                        ],
                    },
                    {
                        coords: [
                            [1200, 800],
                            [1200, 50],
                        ],
                    },
                    {
                        coords: [
                            [1300, 800],
                            [1300, 400],
                        ],
                    },
                    {
                        coords: [
                            [1400, 800],
                            [1400, 50],
                        ],
                    },

                    {
                        coords: [
                            [700, 800],
                            [0, 800],
                        ],
                    },
                    {
                        coords: [
                            [700, 800],
                            [1400, 800],
                        ],
                    },
                ],
            };
            for (var j = 0; j < nodes.length; j++) {
                const { x, y, nodeName, svgPath, symbolSize } = nodes[j];
                var node = {
                    nodeName,
                    value: [x, y],
                    symbolSize: symbolSize || 40,
                    symbol: "path://" + svgPath,
                    itemStyle: {
                        color: "#2ECACE",
                    },
                };
                charts.nodes.push(node);
            }
            let option = {
                xAxis: {
                    min: 0,
                    max: 1400,
                    show: false,
                    type: "value",
                },
                grid: {
                    right: "5%",
                },
                yAxis: {
                    min: 0,
                    max: 1000,
                    show: false,
                    type: "value",
                },
                series: [
                    {
                        type: "graph",
                        coordinateSystem: "cartesian2d",
                        label: {
                            show: true,
                            position: "bottom",
                            color: "#2ECACE",
                            formatter: function (item) {
                                return item.data.nodeName;
                            },
                        },
                        data: charts.nodes,
                    },
                    {
                        type: "lines",
                        polyline: true,
                        coordinateSystem: "cartesian2d",
                        lineStyle: {
                            type: "solid",
                            width: 2,
                            color: "#175064",
                            curveness: 0.3,
                        },
                        effect: {
                            show: false,
                            trailLength: 0.1,
                            symbol: "arrow",
                            color: "#2ECACE",
                            symbolSize: 8,
                        },
                        data: charts.linesData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        // const sjbqState = computed(() => {
        //     return store.state.sjbqDialog
        // })
        watch(
            () => store.state.sjbqDialog,
            (newVlaue) => {
                //drawShaq();
                csszChart();
            }
        );
        return {
            slfhList,
            slfhIndex,
            slfhHandleClick,
            slfhContentList,
            tfsjList,
            tfsjIndex,
            tfsjHandleClick,
            tfsjContentList,
            shaqList,
            slfhContentList1,
            slfhContentList2,
            xgbzHandleClick,
            slfhIndex,
            xgbzIndex,
        };
    },
};
</script>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .bqDialog >>> .closeDialog {
    float: right;
    margin-top: vh(20);
    margin-right: vw(10);
    width: vw(50);
    height: vh(20);
    font-size: vw(14);
    line-height: vh(20);
    cursor: pointer;
}
.bqDialog>div {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 3;
}

.bqDialog>>>th, .bqDialog>>>td {
    border: 1px solid #155e75;
}

.bqDialog>>>th {
    color: rgba(30, 212, 233, 1);
}

.bqDialog>>>.currTitle {
    width: 100%;
    height: vh(20);
    line-height: vh(20);
    text-align: center;
    margin-top: vh(10);
}

.bqDialog {
    .cssz {
        width: vw(969);
        height: vh(504);
        background: url('/data/images/hngk/cssz.png') no-repeat;
        background-size: 100% 100%;

        #csszChart {
            width: vw(900);
            height: vh(400);
        }
    }

    .shaqsj {
        width: vw(924);
        height: vh(533);
        background: url('/data/images/hngk/shaqsj.png') no-repeat;
        background-size: 100% 100%;

        .shaqsjTable {
            display: flex;
            margin: vh(50) vw(0) vh(0) vw(10);

            #shaqChart {
                width: vw(560);
                height: vh(360);
            }

            .shaqtable {
                flex: 4;
                height: vh(360);

                table {
                    font-size: vw(12);

                    tr {
                        height: vh(45);
                        line-height: vh(45);

                        th {
                            height: vh(45);
                            line-height: vh(45);
                            text-align: center;
                        }

                        td {
                            height: vh(45);
                            line-height: vh(45);
                            text-align: center;
                        }
                    }
                }
            }
        }
    }

    .xgbzz {
        width: vw(708);
        height: vh(317);
        background: url('/data/images/hngk/xgbzz.png') no-repeat;
        background-size: 100% 100%;

        .xgbzzTable {
            margin-top: vh(20);
            margin: vh(20);
            display: flex;
            margin: vh(30) vw(0) vh(0) vw(40);

            .tfsjGroup {
                flex-shrink: 0;
                width: vw(168);

                div {
                    width: vw(168);
                    height: vh(40);
                    line-height: vh(40);
                    cursor: pointer;
                    text-align: center;
                    border: 1px solid #155e75;
                }

                .tfsjActive {
                    background: rgba(9, 104, 115, 0.09);
                    color: rgba(30, 212, 233, 1);
                }
            }

            .tfsjGroupContent {
                flex-shrink: 0;
                width: vw(383);
                height: vh(200);
                border: 1px solid #155e75;
                padding: vw(20);
            }
        }
    }

    .tfsjczz {
        width: vw(634);
        height: vh(310);
        background: url('/data/images/hngk/tfsjczz.png') no-repeat;
        background-size: 100% 100%;

        .tfsjczzTable {
            margin-top: vh(20);
            margin: vh(20);
            display: flex;
            margin: vh(30) vw(0) vh(0) vw(40);

            .tfsjGroup {
                flex-shrink: 0;
                width: vw(168);

                div {
                    width: vw(168);
                    height: vh(40);
                    line-height: vh(40);
                    cursor: pointer;
                    text-align: center;
                    border: 1px solid #155e75;
                }

                .tfsjActive {
                    background: rgba(9, 104, 115, 0.09);
                    color: rgba(30, 212, 233, 1);
                }
            }

            .tfsjGroupContent {
                flex-shrink: 0;
                width: vw(383);
                height: vh(200);
                border: 1px solid #155e75;
                padding: vw(20);
            }
        }
    }

    .slfhqbqz {
        width: vw(634);
        height: vh(310);
        background: url('/data/images/hngk/slfhqbqz.png') no-repeat;
        background-size: 100% 100%;

        .slfhqbqzTable {
            margin-top: vh(20);
            margin: vh(20);
            display: flex;
            margin: vh(30) vw(0) vh(0) vw(40);

            .slfhGroup {
                flex-shrink: 0;
                width: vw(168);

                div {
                    width: vw(168);
                    height: vh(40);
                    line-height: vh(40);
                    cursor: pointer;
                    text-align: center;
                    border: 1px solid #155e75;
                }

                .slfhActive {
                    background: rgba(9, 104, 115, 0.09);
                    color: rgba(30, 212, 233, 1);
                }
            }

            .slfhGroupContent {
                flex-shrink: 0;
                width: vw(383);
                height: vh(200);
                border: 1px solid #155e75;
                padding: vw(20);
            }
        }
    }

    .sjbqdjhf {
        width: vw(924);
        height: vh(670);
        background: url('/data/images/hngk/sjbqdjhf.png') no-repeat;
        background-size: 100% 100%;

        .sjbqdjhfTable {
            margin-top: vh(20);
            margin: vh(20);
            table {
                width: 100%;
                height: vh(120);
                line-height: vh(40);
                text-align: center;
                border-width: 5px;
                border-color: #155e75;
                border-collapse: collapse;

                tr:nth-child(1) {
                    height: vh(25);

                    th:nth-child(1) {
                        width: vw(136);
                        border: 1px solid #155e75;
                        height: vh(25);
                    }

                    th:nth-child(2) {
                        width: vw(430);
                        height: vh(25);
                    }

                    th:nth-child(3) {
                        width: vw(288);
                        height: vh(25);
                    }
                }

                tr:nth-child(2) {
                    color: #fff;
                    height: vh(120);
                    font-size: vw(12);
                    td:nth-child(1) {
                        width: vw(136);
                        border: 1px solid #155e75;

                        div {
                            color: rgba(37, 189, 76, 1);
                            height: vh(20);
                            line-height: vh(20);
                        }
                    }

                    td:nth-child(2) {
                        width: vw(430);
                        height: vh(25);
                        text-align: left;
                    }

                    td:nth-child(3) {
                        width: vw(288);
                        text-align: left;
                        height: vh(20);
                        line-height: vh(20);
                    }
                }

                tr:nth-child(3) {
                    color: #fff;
                    height: vh(50);
                    font-size: vw(12);

                    td:nth-child(1) {
                        width: vw(136);
                        border: 1px solid #155e75;
                        height: vh(25);

                        div {
                            color: rgba(229, 176, 48, 1);
                            height: vh(20);
                            line-height: vh(20);
                        }
                    }

                    td:nth-child(2) {
                        width: vw(430);
                        height: vh(25);
                        text-align: left;
                        padding: vh(10) vw(0) vh(0) vw(20);

                        div.flexContent {
                            display: flex;
                            justify-content: flex-start;

                            div:nth-child(1) {
                                flex-shrink: 0;
                                width: vw(160);
                                height: vh(20);
                                line-height: vh(20);
                            }

                            div:nth-child(2) {
                                width: vw(270);

                                div {
                                    width: vw(270);
                                    height: vh(20);
                                    line-height: vh(20);
                                }
                            }
                        }
                    }

                    td:nth-child(3) {
                        width: vw(288);
                        height: vh(25);
                        height: vh(20);
                        line-height: vh(20);
                    }
                }

                tr:nth-child(4) {
                    color: #fff;
                    height: vh(50);
                    font-size: vw(12);

                    td:nth-child(1) {
                        width: vw(136);
                        height: vh(25);

                        div {
                            color: rgba(207, 49, 28, 1);
                            height: vh(20);
                            line-height: vh(20);
                        }
                    }

                    td:nth-child(2) {
                        width: vw(430);
                        height: vh(25);
                        text-align: left;
                        padding: vh(10) vw(0) vh(0) vw(20);

                        div.flexContent {
                            display: flex;
                            justify-content: flex-start;

                            div:nth-child(1) {
                                flex-shrink: 0;
                                width: vw(160);
                                height: vh(20);
                                line-height: vh(20);
                            }

                            div:nth-child(2) {
                                width: vw(270);

                                div {
                                    width: vw(270);
                                    height: vh(20);
                                    line-height: vh(20);
                                }
                            }
                        }
                    }

                    td:nth-child(3) {
                        width: vw(288);
                        height: vh(25);
                        height: vh(20);
                        line-height: vh(20);
                        text-align: left;
                    }
                }
            }
        }
    }
}
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
   .bqDialog >>> .closeDialog {
    float: right;
    margin-top: vh(20);
    margin-right: vw(10);
    width: vw(50);
    height: vh(20);
    font-size: vw(14);
    line-height: vh(20);
    cursor: pointer;
}
.bqDialog>div {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 3;
}

.bqDialog>>>th, .bqDialog>>>td {
    border: 1px solid #155e75;
}

.bqDialog>>>th {
    color: rgba(30, 212, 233, 1);
}

.bqDialog>>>.currTitle {
    width: 100%;
    height: vh(20);
    line-height: vh(40);
    text-align: center;
    margin-top: vh(10);
}

.bqDialog {
    .cssz {
        width: vw(969);
        height: vh(504);
        background: url('/data/images/hngk/cssz.png') no-repeat;
        background-size: 100% 100%;

        #csszChart {
            width: vw(900);
            height: vh(400);
        }
    }

    .shaqsj {
        width: vw(924);
        height: vh(533);
        background: url('/data/images/hngk/shaqsj.png') no-repeat;
        background-size: 100% 100%;

        .shaqsjTable {
            display: flex;
            margin: vh(50) vw(0) vh(0) vw(10);

            #shaqChart {
                width: vw(560);
                height: vh(360);
            }

            .shaqtable {
                flex: 4;
                height: vh(360);

                table {
                    font-size: vw(12);

                    tr {
                        height: vh(45);
                        line-height: vh(45);

                        th {
                            height: vh(45);
                            line-height: vh(45);
                            text-align: center;
                        }

                        td {
                            height: vh(45);
                            line-height: vh(45);
                            text-align: center;
                        }
                    }
                }
            }
        }
    }

    .xgbzz {
        width: vw(708);
        height: vh(317);
        background: url('/data/images/hngk/xgbzz.png') no-repeat;
        background-size: 100% 100%;

        .xgbzzTable {
            margin-top: vh(20);
            margin: vh(20);
            display: flex;
            margin: vh(30) vw(0) vh(0) vw(40);

            .tfsjGroup {
                flex-shrink: 0;
                width: vw(168);

                div {
                    width: vw(168);
                    height: vh(40);
                    line-height: vh(40);
                    cursor: pointer;
                    text-align: center;
                    border: 1px solid #155e75;
                }

                .tfsjActive {
                    background: rgba(9, 104, 115, 0.09);
                    color: rgba(30, 212, 233, 1);
                }
            }

            .tfsjGroupContent {
                flex-shrink: 0;
                width: vw(383);
                height: vh(200);
                border: 1px solid #155e75;
                padding: vw(20);
            }
        }
    }

    .tfsjczz {
        width: vw(634);
        height: vh(310);
        background: url('/data/images/hngk/tfsjczz.png') no-repeat;
        background-size: 100% 100%;

        .tfsjczzTable {
            margin-top: vh(20);
            margin: vh(20);
            display: flex;
            margin: vh(30) vw(0) vh(0) vw(40);

            .tfsjGroup {
                flex-shrink: 0;
                width: vw(168);

                div {
                    width: vw(168);
                    height: vh(40);
                    line-height: vh(40);
                    cursor: pointer;
                    text-align: center;
                    border: 1px solid #155e75;
                }

                .tfsjActive {
                    background: rgba(9, 104, 115, 0.09);
                    color: rgba(30, 212, 233, 1);
                }
            }

            .tfsjGroupContent {
                flex-shrink: 0;
                width: vw(383);
                height: vh(200);
                border: 1px solid #155e75;
                padding: vw(20);
            }
        }
    }

    .slfhqbqz {
        width: vw(634);
        height: vh(310);
        background: url('/data/images/hngk/slfhqbqz.png') no-repeat;
        background-size: 100% 100%;

        .slfhqbqzTable {
            margin-top: vh(20);
            margin: vh(20);
            display: flex;
            margin: vh(30) vw(0) vh(0) vw(40);

            .slfhGroup {
                flex-shrink: 0;
                width: vw(168);

                div {
                    width: vw(168);
                    height: vh(40);
                    line-height: vh(40);
                    cursor: pointer;
                    text-align: center;
                    border: 1px solid #155e75;
                }

                .slfhActive {
                    background: rgba(9, 104, 115, 0.09);
                    color: rgba(30, 212, 233, 1);
                }
            }

            .slfhGroupContent {
                flex-shrink: 0;
                width: vw(383);
                height: vh(200);
                border: 1px solid #155e75;
                padding: vw(20);
            }
        }
    }

    .sjbqdjhf {
        width: vw(924);
        height: vh(800);
        background: url('/data/images/hngk/sjbqdjhf.png') no-repeat;
        background-size: 100% 100%;
        margin-top:vh(200);
        .sjbqdjhfTable {
            margin-top: vh(20);
            margin: vh(20);
            table {
                width: 100%;
                height: vh(120);
                line-height: vh(40);
                text-align: center;
                border-width: 5px;
                border-color: #155e75;
                border-collapse: collapse;

                tr:nth-child(1) {
                    height: vh(25);

                    th:nth-child(1) {
                        width: vw(136);
                        border: 1px solid #155e75;
                        height: vh(25);
                    }

                    th:nth-child(2) {
                        width: vw(430);
                        height: vh(25);
                    }

                    th:nth-child(3) {
                        width: vw(288);
                        height: vh(25);
                    }
                }

                tr:nth-child(2) {
                    color: #fff;
                    height: vh(50);
                    font-size: vw(12);

                    td:nth-child(1) {
                        width: vw(136);
                        border: 1px solid #155e75;

                        div {
                            color: rgba(37, 189, 76, 1);
                            height: vh(20);
                            line-height: vh(20);
                        }
                    }

                    td:nth-child(2) {
                        width: vw(430);
                        height: vh(25);
                        text-align: left;
                    }

                    td:nth-child(3) {
                        width: vw(288);
                        text-align: left;
                        height: vh(20);
                        line-height: vh(20);
                    }
                }

                tr:nth-child(3) {
                    color: #fff;
                    height: vh(50);
                    font-size: vw(12);

                    td:nth-child(1) {
                        width: vw(136);
                        border: 1px solid #155e75;
                        height: vh(25);

                        div {
                            color: rgba(229, 176, 48, 1);
                            height: vh(20);
                            line-height: vh(20);
                        }
                    }

                    td:nth-child(2) {
                        width: vw(430);
                        height: vh(25);
                        text-align: left;
                        padding: vh(10) vw(0) vh(0) vw(20);

                        div.flexContent {
                            display: flex;
                            justify-content: flex-start;

                            div:nth-child(1) {
                                flex-shrink: 0;
                                width: vw(160);
                                height: vh(20);
                                line-height: vh(20);
                            }

                            div:nth-child(2) {
                                width: vw(270);

                                div {
                                    width: vw(270);
                                    height: vh(20);
                                    line-height: vh(20);
                                }
                            }
                        }
                    }

                    td:nth-child(3) {
                        width: vw(288);
                        height: vh(25);
                        height: vh(20);
                        line-height: vh(20);
                    }
                }

                tr:nth-child(4) {
                    color: #fff;
                    height: vh(50);
                    font-size: vw(12);

                    td:nth-child(1) {
                        width: vw(136);
                        height: vh(25);

                        div {
                            color: rgba(207, 49, 28, 1);
                            height: vh(20);
                            line-height: vh(20);
                        }
                    }

                    td:nth-child(2) {
                        width: vw(430);
                        height: vh(25);
                        text-align: left;
                        padding: vh(10) vw(0) vh(0) vw(20);

                        div.flexContent {
                            display: flex;
                            justify-content: flex-start;

                            div:nth-child(1) {
                                flex-shrink: 0;
                                width: vw(160);
                                height: vh(20);
                                line-height: vh(20);
                            }

                            div:nth-child(2) {
                                width: vw(270);

                                div {
                                    width: vw(270);
                                    height: vh(20);
                                    line-height: vh(20);
                                }
                            }
                        }
                    }

                    td:nth-child(3) {
                        width: vw(288);
                        height: vh(25);
                        height: vh(20);
                        line-height: vh(20);
                        text-align: left;
                    }
                }
            }
        }
    }
}
}
</style>